/*
 * 节流指令说明：防止按钮在短时间内被多次点击，利用节流函数限制按钮在规定时间内只能点击一次
 * 实现说明：
    1、第一次点击后，立即调用方法并禁用按钮，等规定时间后再次激活按钮，达到稀释点击次数的功能
    2、将需要触发的方法绑定在指令上
 * 节流指令使用：<button v-throttle="onClickFunc">提交</button>
 */
import type { Directive, DirectiveBinding } from 'vue';
interface ElemntType extends HTMLElement {
  _handleClick: () => void;
  disabled: boolean;
}
const throttle: Directive = {
  beforeMount(el: ElemntType, binding: DirectiveBinding) {
    // 首先判断指令绑定的是不是一个函数
    if (typeof binding.value !== 'function') {
      throw 'callback must be a function';
    }
  },
  mounted(el: ElemntType, binding) {
    let timer: any;
    el._handleClick = function () {
      if (timer) {
        return;
      }
      if (!el.disabled) {
        el.disabled = true;
        binding.value();
        timer = setTimeout(() => {
          el.disabled = false;
          timer = null;
        }, 1500);
      }
    };
    el.addEventListener('click', el._handleClick);
  },
  beforeUnmount(el) {
    el.removeEventListener('click', el._handleClick);
  },
};

export default throttle;
